<template>
  <div class="taking-pictures">
    <ul>
      <li>
        <i class="text"></i>
      </li>
      <li>
        <i class="picture" @click="goToExifView"></i>
      </li>
      <li>
        <i class="video"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TakingPictures",
  methods: {
    goToExifView() {
      this.$router.push({
        name: "exif"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.taking-pictures {
  width: 100vw;
  height: 100vh;

  ul {
    width: 100vw;
    position: fixed;
    bottom: 100px;
    left: 0;
    display: flex;
    justify-content: space-around;
    i {
      width: 100px !important;
      height: 100px !important;
      background-repeat: no-repeat;
      display: block;
      background-size: contain;
    }

    .text {
      background-image: url(~@/assets/images/tabbar/9wY.png) !important;
    }

    .picture {
      background-image: url(~@/assets/images/tabbar/tKt.png) !important;
    }

    .video {
      background-image: url(~@/assets/images/tabbar/BeY.png) !important;
    }
  }
}
</style>